<template>
  <el-select
    @change="$emit('input', arguments[0])"
    v-bind="$attrs"
    v-if="group"
    v-model="form"
  >
    <el-option-group
      :key="group.value"
      :label="group.label"
      :value="group.value"
      v-for="group in options"
    >
      <el-option
        :disabled="disableFn(item)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        v-for="item in group.options"
      ></el-option>
    </el-option-group>
  </el-select>
  <el-cascader
    :options="options"
    @change="$emit('input', arguments[0])"
    v-bind="$attrs"
    v-else-if="cascader"
    v-model="form"
  ></el-cascader>
  <el-select
    @change="$emit('input', arguments[0])"
    v-bind="$attrs"
    v-else
    v-model="form"
  >
    <el-option
      :disabled="disableFn(item)"
      :key="index"
      :label="item.label"
      :value="item.value"
      v-for="(item, index) of options"
    ></el-option>
  </el-select>
</template>

<script>
import { mapGetters } from "vuex";
import vModelMixins from "../../mixins/vModelMixins";

export default {
  name: "selector",
  mixins: [vModelMixins],
  props: {
    // 过滤函数
    filterFn: {
      type: Function,
      default: arr => arr
    },
    // 禁用函数
    disableFn: {
      type: Function,
      default: () => false
    },
    type: {
      type: String
    },
    disabledOptions: {
      type: [Array, Number, String],
      default: undefined
    },
    group: {
      type: Boolean,
      default: false
    },
    cascader: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: [String, Number, String],
      default: undefined
    },
    list: {
      type: Array,
      default: () => []
    },
    showAll: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      options: []
    };
  },
  computed: {
    ...mapGetters({
      // shop: 'user/shop' // 店铺信息
    }),
    selectItem() {
      if (this.group) {
        return undefined;
      }
      if (this.cascader) {
        return undefined;
      }
      return this.options.find(i => i.value === this.form);
    }
  },
  watch: {
    list(val) {
      this.options = val;
    }
  },
  methods: {
    async handleChange() {
      await this.$nextTick();
      this.this.$emit("change", { ...this.selectItem });
    },
    // eslint-disable-next-line no-underscore-dangle
    async _initData() {
      let data = [];
      // eslint-disable-next-line no-unused-vars
      let [err, res] = [];
      const params = {};
      switch (this.type) {
        case "infoType": //
          [err, res] = await this.$Api.getApi("infoTypes").types(params);
          data = res;
          // data = res.map(i => ({ label: i.name, value: i.id }));
          break;
        case "roleTypes":
          [err, res] = await this.$Api.getApi("roles").types(params);
          data = res;
          break;
        case "deptTreeList":
          [err, res] = await this.$Api.getApi("depts").types(params);
          data = res;
          break;
        default:
          // 根据传入的list 渲染selector
          data = this.list;
          break;
      }
      // 过滤
      if (this.filterFn) data = data.filter(this.filterFn);
      if (this.group) {
        this.options = this.formatOptions(data, "options");
      } else if (this.cascader) {
        this.options = this.formatOptions(data, "children");
      } else {
        this.options = data;
      }
      if (this.showAll !== undefined) {
        try {
          this.options.unshift({
            label: this.showAll,
            value: undefined
          });
        } catch (error) {
          console.log(error);
        }
      }
      if (this.defaultValue) this.form = this.defaultValue;
      // this.handleChange();
    },
    formatOptions(arr, key) {
      return arr.filter(this.filterFn).map(i => {
        // let ret = {
        // 	label: i.label,
        // 	value: i.value
        // };
        const ret = { ...i, disabled: this.disableFn(i) };
        if (i.children) {
          ret[key] = this.formatOptions(i.children);
        }
        return ret;
      });
    }
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this._initData();
  }
};
</script>
